<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左侧栏</title>
  <link rel="stylesheet" href="../../../bom/css/base.css">
  <script src="../../../jq/js/jquery.js"></script>
  <style>
    body {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(50px, 200px) auto;
      grid-template-rows: auto;
    }

    section {
      background-color: #6495ed;
    }

    aside {
      border-right: 2px solid #cccccc;
      background-color: #1c232f;
    }

    aside>h1 {
      color: #ffffff;
      text-align: center;
      padding: 10px 0px;
      letter-spacing: 4px;
      user-select: none;
    }

    nav {
      padding: 5px 0;
      border-top: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
    }

    nav>dl {
      text-align: center;
    }

    nav>dl>dt {
      color: #ffffff;
      background-color: #1A1E2A;
      font-size: 22px;
      padding: 10px 0px;
      cursor: pointer;
    }

    nav>dl>dd {
      color: #CAC5C0;
      font-size: 18px;
      padding: 8px;
    }

    nav>dl>dd:hover {
      background-color: #12040c;
    }
  </style>
</head>

<body>
  <!-- 左侧侧边栏 -->
  <aside>
    <h1>xx后台</h1>
    <!-- 菜单栏导航 -->
    <nav>
      <!-- 每一个菜单栏项 -->
      <dl>
        <!-- 主标题 -->
        <dt>商品管理</dt>
        <!-- 子标题 -->
        <dd>商品列表</dd>
        <dd>添加商品</dd>
      </dl>

      <!-- 每一个菜单栏项 -->
      <dl>
        <!-- 主标题 -->
        <dt>订单管理</dt>
        <!-- 子标题 -->
        <dd>订单列表</dd>
        <dd>添加订单</dd>
      </dl>

      <!-- 每一个菜单栏项 -->
      <dl>
        <!-- 主标题 -->
        <dt>类目管理</dt>
        <!-- 子标题 -->
        <dd>类目列表</dd>
        <dd>添加类目</dd>
      </dl>
    </nav>
  </aside>
  <!-- 右侧内容区域 -->
  <section>
    <p>
      内容的了吧
    </p>
  </section>
</body>
<script>
  "use strict";
  $(function () {
    // 隐藏所有子标题
    $("dl").each(function () {
      $(this).children("dd").hide();
      // 给所有主标题添加绑定事件
      $(this).children("dt").click(function () {
        // 当我点击主标题时，子标题显示出来
        console.log(`出来呗`);

      });
    });

  });
</script>

</html>